<template>
    <div class="body">
        <div class="title-content">
            <p class="title">提交资料</p>
            <p class="sub-title">注册账号-提交资料-注册成功</p>
        </div>
        <div>
            <input class="input-content" v-model="form.phone" type="number" placeholder="手机号码"/>
            <div class="vcode-content">
                <input class="input-content" v-model="form.vcode" type="number" placeholder="验证码">
                <van-button color="#3DCEB9" :disabled="disabled" @click="getVcode">{{vcodeText}}</van-button>
            </div>
            <input class="input-content" v-model="form.pwd" maxlength="12" type="password" placeholder="登录密码"/>
            <input class="input-content" v-model="form.addpassword" maxlength="12" type="password" placeholder="重复密码"/>
            <input class="input-content" v-model="form.code" type="text" placeholder="邀请码(选填)"/>
            <input class="input-content" v-model="form.name" type="text" placeholder="真实姓名"/>
            <van-radio-group v-model="form.role_type" direction="horizontal" checked-color="#3DCEB9" @change="()=>{form.group_name=''}">
                <div class="isBoss-options" :class="form.role_type==1?'selected':''">
                    <van-radio :name="1">我是老板</van-radio>
                </div>
                <div class="isBoss-options" :class="form.role_type==2?'selected':''">
                    <van-radio :name="2">我是员工</van-radio>
                </div>
            </van-radio-group>
            <input type="text" class="input-content" v-model="form.group_name" v-if="form.role_type == 1?true:false" placeholder="请输入公司名称"/>
            <input type="text" class="input-content" v-model="form.group_name" v-else @click="selectCompany" readonly placeholder="选择所属公司">
        </div>
        <van-button round color="#3DCEB9" size="large" @click="register">提交并登录</van-button>
        <van-popup v-model="showPicker" round position="bottom">
        <van-picker
            title="选择公司"
            show-toolbar
            value-key="name"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
        />
        </van-popup>
        <!-- <div class="to-register">
            <p>还没有账号?</p>
            <router-link to="/register">点此注册</router-link>
        </div> -->
    </div>
</template>
<script>
import {CompanyList,SendMsg,register} from '../ajax'
import { Notify } from 'vant';
export default {
    data() {
        return {
            columns: [],
            showPicker:false,
            vcodeText:"获取验证码",
            disabled:false,
            form:{
                openid:'',
                code:'',
                name:'',
                vcode:'',
                phone:'',
                pwd:'',
                addpassword:'',
                group_name:'',
                role_type:1
            }
        }
    },
    created(){
        this.form.openid = this.$store.getters.wxUserInfo.openid;
        this.getCompanyList();
    },
    methods:{
        selectCompany(){
            this.showPicker = !this.showPicker
        },
        onConfirm(item){    
            console.log(item);
            this.form.group_name = item.name
            this.showPicker = !this.showPicker
        },
        onCancel(){
            this.showPicker = !this.showPicker
        },
        getCompanyList(){
            CompanyList().then(res=>{
                // console.log(res);
                this.columns = res.list;
            })
        },
        getVcode(){
            const data = {
                phone:this.form.phone,
                type:'Z',
                admin_id:this.$store.getters.admin_id
            }
            if(!(/^1[3456789]\d{9}$/.test(data.phone))){ 
                Notify({ type: 'danger', message: '手机号码格式有误,请输入正确的手机号码' });
                return false; 
            }
            let time = 60
            let timer = setInterval(()=>{
                if(!time){
                    this.vcodeText = `获取验证码`
                    this.disabled = false;
                    clearInterval(timer);
                    return;
                }
                time--;
                this.disabled = true;
                this.vcodeText = `再次获取(${time})`
            },1000)
            if(this.disabled){
                Notify({ type: 'danger', message: '请勿频繁操作获取验证码' });
            }else{
                SendMsg(data).then(res=>{
                    Notify({ type: 'success', message: '验证码已通过短信形式发送至手机,请注意查收' });
                    return;
                })
            }
        },
        register(){
            const {form} = this;
            if(!(/^1[3456789]\d{9}$/.test(form.phone))){ 
                Notify({ type: 'danger', message: '手机号码格式有误,请输入正确的手机号码' });
                return false; 
            }else if(!form.vcode || form.vcode.length !== 6){
               Notify({ type: 'danger', message: '验证码错误,请核对验证码' });
                return false;  
            }else if(!(/^[0-9a-zA-Z]{3,12}$/.test(form.pwd))){
                Notify({ type: 'danger', message: '密码格式为3至12位数字,字母组合' });
                return false;  
            }else if(form.addpassword !== form.pwd){
                Notify({ type: 'danger', message: '两次密码不一致,请核对密码' });
                return false;  
            }else if(!form.name){
                Notify({ type: 'danger', message: '请输入真实姓名' });
                return false;
            }else if(!form.group_name){
                
                if(form.role_type == 1){
                    Notify({ type: 'danger', message: '请填写公司名称' });
                }else{
                    Notify({ type: 'danger', message: '请选择所属公司' });
                }
                return false;
            }
            form.admin_id = this.$store.getters.admin_id
            register(form).then(res=>{
                Notify({ type: 'success', message: '注册成功' });
                this.$router.push('/login');
            })
        }
    }
}
</script>
<style lang="scss" scoped>
        $green:#3DCEB9;
        $white:#fff;
    .body{
        width: 80%;
        height: calc(100vh - 4rem);
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: $white;
        .title-content{
            .title{
                font-size: 2rem;
                line-height: 3rem;
            }
            .sub-title{
                font-size: 0.8rem;
            }
        }
        .to-register{
            text-align: center;
            p{
                font-size: 0.9rem;
            }
            a{
                text-decoration: underline;
                color: $green;
            }
        }
        .isBoss-options{
            width: 35%;
            padding: 0.8rem 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .selected{
            border-color: $green;
            >>> .van-radio__label{
                color: $green;
            }
        }
        .van-radio-group{
            display: flex;
            justify-content: space-between;
        }
        .vcode-content{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .input-content{
                width: 50%;
            }
        }
    }
</style>